import { connect } from 'react-redux';
import { ActionCreators as UndoActionCreators } from 'redux-undo';

const App: React.FC<{
  state: number;
  canUndo: boolean;
  canRedo: boolean;
  onAdd: () => void;
  onDel: () => void;
  onUndo: () => void;
  onRedo: () => void;
}> = function ({ state, canUndo, canRedo, onAdd, onDel, onUndo, onRedo }) {
  console.log('1')
  return (
    <div>
      Redux {state} <button onClick={onAdd}>+</button> <button onClick={onDel}>-</button>
      <button onClick={onUndo} disabled={!canUndo}>
        undo
      </button>
      <button onClick={onRedo} disabled={!canRedo}>
        redo
      </button>
    </div>
  );
};

function mapStateToProps(state: any) {
  return {
    state: state.present,
    canUndo: state.past.length > 0,
    canRedo: state.future.length > 0,
  };
}

function mapDispatchToProps(dispatch: any) {
  return {
    onAdd: () => dispatch({ type: 'ADD' }),
    onDel: () => dispatch({ type: 'DEL' }),
    onUndo: () => dispatch(UndoActionCreators.undo()),
    onRedo: () => dispatch(UndoActionCreators.redo()),
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(App);
